<template>
  <!-- 系统目录 西成药品 -->
  <div class="MedicenCata">
    <!-- main -->
    <div class="main">
      <!-- left -->
<!--      <div class="main-left">
        &lt;!&ndash; tree &ndash;&gt;
        <el-tree
            :data="elTree"
            :props="defaultProps"
            node-key="label"
            :default-expanded-keys="['全部']"
            accordion
            @node-click="handleNodeClick"
            class="custom-tree"
        >
					<span class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 12px;">
						<span :name="node.label">
							<i v-if="!data.children"
                 :class="node.expanded ? 'el-icon-openFile' : 'el-icon-closeFiles'"></i>
							<i v-else class="el-icon-openFile"></i>{{ node.label }}
						</span>
					</span>
        </el-tree>
      </div>-->
      <!-- right -->
      <div class="main-right" ref="mainRight">
        <!-- tit -->
        <div class="main-icon">
          <div class="main-icon-a">
            <i :class="iconComes"
               style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #5a5a5a;color: #fff;"></i>
            <span style="font-size: 12px;font-weight:bold;margin-left: 12px;color: #606266;">{{ CatalogueName }}</span>
          </div>
          <!-- btn1 -->
          <div class="main-icon-b">
            <span style="font-size: 12px;color: #606266;font-weight: bold;">状态:</span>
            <el-dropdown @command="handleCommand" trigger="click">
              <span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">可用</el-dropdown-item>
                <el-dropdown-item command="b">禁用</el-dropdown-item>
                <el-dropdown-item command="c" divided>全部</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- btn2 -->
          <div class="main-icon-c">
            <span
                style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字:</span>
            <el-input size="mini" v-model="searchValue"  @keyup.enter.native="handClick(0)"></el-input>
          </div>
          <!-- btn3 -->
          <div class="main-icon-c">
            <el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini"  v-if="!v.auth || permissionsArr?.includes(v.auth)"
                       :style="v.style" @click="handClick(i)">{{ v.title }}
            </el-button>
          </div>
        </div>
        <!-- table -->
        <div class="table">
          <el-table :data="tableData" border @row-dblclick="handleShowData">
            <el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop"
                             :label="col.name" align="center"
                             :render-header="labelHead"
                             :min-width="getColumnWidth(col.label,col.prop,tableData)">

              <template #default="{ row }">
                {{ safeGetMappedValue(col, row) }}
              </template>

            </el-table-column>


            <!-- fixed -->
            <el-table-column fixed="left" label="行号" type="index"></el-table-column>
            <!-- edit -->
            <el-table-column fixed="right" label="操作" width="148" v-if="permissionsArr?.includes('system:costnametable:edit')">
              <template slot-scope="scope">
                <div class="editbox" style="text-align: center;">
                  <el-button type="primary" @click="handleClickEdit(scope.row)" size="mini" >编辑</el-button>
                  <el-button type="danger" @click="handleStartOrDisabled(scope.row)" size="mini">
                    {{ scope.row.state === 1 ? '禁用' : '启用' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[8, 16, 24]"
            :page-size="pageSize"
            :total="totalSize"
            layout="total, sizes, prev, pager, next, jumper"
            background
        >
        </el-pagination>
      </div>
    </div>
    <!-- feet -->
    <div class="feet">
      <!-- add data 新增 -->
      <!-- messagesBox -->
      <div class="addmessagesBox">
        <el-dialog title="新增" :visible.sync="addChargingVisible" width="50%" :before-close="addEmptyForm"
                   :close-on-click-modal="false" class="patient-dialog">
          <div class="aform">
            <el-tabs type="border-card">
              <el-tab-pane label="标准收费项目">
                <el-form ref="mainForm" :model="addForm" label-width="100px" size="mini" :rules="rules">
                  <el-row :gutter="20">
                    <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
                      <!-- input -->
                      <el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
                        <el-input :suffix-icon='v.prefix' v-model="$data.addForm[v.modelValue]"
                                  :placeholder="v.placeholder"
                                  @input='OpenIconsFocus(v,i)' :disabled="v.isdisabled === 1"
                        ></el-input>
                      </el-form-item>
                      <!-- select -->
                      <el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
                        <el-select v-model="$data.addForm[v.modelValue]" filterable :placeholder="v.placeholder"
                                   remote
                                   :remote-method="(query) => handleRemoteSearch(v, i, query)"
                                   @input='OpenIconsFocus(v,i,$event)'
                                   @focus="monitorAddData1(v,i)" @change="monitorAddDataManage1(v,i,$event)">
                          <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
                            <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <!-- number -->
                      <el-form-item v-if="v.type == 'number'" :label="v.label" :prop="v.modelValue">
                        <el-input v-model="$data.addForm[v.modelValue]" filterable :placeholder="v.placeholder"
                                  @input="$data.addForm[v.modelValue] = $event.replace(/[^0-9.]/g, '')">
                          <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.label">
                          </el-option>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <!-- 表单 -->

          </div>
          <!-- 新增表单 -->
          <div class="bform">
            <el-tabs type="border-card">
              <el-tab-pane label="价格信息">
                <el-form ref="mainForm" :model="addForm" label-width="120px" size="mini" style="margin-top: 12px;"
                         :rules="rules">
                  <el-row :gutter="5">
                    <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType2" :key="i">
                      <!-- input -->
                      <el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
                        <el-input :suffix-icon='v.prefix' v-model="$data.addForm[v.modelValue]"
                                  :placeholder="v.placeholder"
                        ></el-input>
                      </el-form-item>
                      <!-- select -->
                      <el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
                        <el-select v-model="$data.addForm[v.modelValue]" filterable :placeholder="v.placeholder"
                                   :clearable="v.modelValue === 'chstype'"
                                   :disabled="shouldDisableField(v)"
                                   @input='OpenIconsFocus(v,i)'
                                   @focus="monitorAddData2(v,i)" @change="monitorAddDataManage2(v,i)">
                          <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
                            <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <!-- number -->
                      <el-form-item v-if="v.type == 'number'" :label="v.label" :prop="v.modelValue">
                        <el-input v-model="$data.addForm[v.modelValue]" filterable :placeholder="v.placeholder"
                                  @input="$data.addForm[v.modelValue] = $event.replace(/[^0-9.]/g, '')"
                                  :disabled="v.modelValue === 'medicalRecordCostId'">>
                          <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.label">
                          </el-option>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>

          </div>
          <span slot="footer" class="dialog-footer">
				    <el-button type="primary" @click="addNewData" size="mini">确定</el-button>
				    <el-button @click="addEmptyForm" size="mini">取消</el-button>
				  </span>
        </el-dialog>
      </div>


      <!-- edit data 修改 -->
      <!-- 修改对话框（调整为与新增一致） -->
      <div class="editmessagesBox">
        <el-dialog :title="dynamicTitle" :visible.sync="dialogVisible" width="50%" :before-close="cancelUpdateForm"
            :modal="false" :close-on-click-modal="false" class="patient-dialog">
          <div class="aform">
            <el-tabs type="border-card">
              <el-tab-pane label="标准收费项目">
                <el-form ref="mainForm" :model="editForm" label-width="100px" size="mini" :rules="rules"
                         :disabled="isLookData">
                  <el-row :gutter="20">
                    <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
                      <!-- input -->
                      <el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
                        <el-input
                            :suffix-icon='v.prefix'
                            v-model="$data.editForm[v.modelValue]"
                            :placeholder="v.placeholder"
                            :disabled="v.modelValue === 'medicalRecordCostId' || v.isdisabled === 1">
                        </el-input>
                      </el-form-item>

                      <!-- select -->
                      <el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
                        <el-select
                            v-model="$data.editForm[v.modelValue]"
                            filterable
                            :placeholder="v.placeholder"
                            remote
                            :remote-method="(query) => handleRemoteSearch(v, i, query)"
                            :disabled="v.modelValue === 'medicalRecordCostId'"
                            @input="OpenIconsFocus(v,i,$event)"
                            @change="monitorUpdateDataManage1(v,i)">
                          <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
                            <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <!-- number -->
                      <el-form-item v-if="v.type == 'number'" :label="v.label" :prop="v.modelValue">
                        <el-input
                            v-model="$data.editForm[v.modelValue]"
                            filterable
                            :placeholder="v.placeholder"
                            :disabled="v.modelValue === 'medicalRecordCostId'"
                            @input="$data.editForm[v.modelValue] = $event.replace(/[^0-9.]/g, '')">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>

          </div>

          <!-- 价格信息（调整为与新增一致） -->
          <div class="bform">
            <el-tabs type="border-card">
              <el-tab-pane label="价格信息">
                <el-form ref="mainForm" :model="editForm" label-width="120px" size="mini" style="margin-top: 12px;"
                         :rules="rules" :disabled="isLookData">
                  <el-row :gutter="20">
                    <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType2" :key="i">
                      <!-- input -->
                      <el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
                        <el-input
                            :suffix-icon='v.prefix'
                            v-model="$data.editForm[v.modelValue]"
                            :placeholder="v.placeholder">
                        </el-input>
                      </el-form-item>

                      <!-- select -->
                      <el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
                        <el-select
                            v-model="$data.editForm[v.modelValue]"
                            filterable
                            :placeholder="v.placeholder"
                            :clearable="v.modelValue === 'chstype'"
                            :disabled="shouldDisableField(v)"
                            @focus="monitorUpdateData2(v,i)"
                            @change="monitorUpdateDataManage2(v,i)">
                          <el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
                            <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <!-- number -->
                      <el-form-item v-if="v.type == 'number'" :label="v.label" :prop="v.modelValue">
                        <el-input
                            v-model="$data.editForm[v.modelValue]"
                            filterable
                            :placeholder="v.placeholder"
                            @input="$data.editForm[v.modelValue] = $event.replace(/[^0-9.]/g, '')">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>

          <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveEditData" size="mini" :disabled="isLookData">保 存</el-button>
      <el-button @click="cancelUpdateForm" size="mini">取 消</el-button>
    </span>
        </el-dialog>
      </div>
    </div>

  </div>
</template>/

<script>
// selfs / js
import AccType from './AddType.js'
import AccType2 from './AddType2.js'
// 接口
import {
  addChargePrice,
  costnametablePage,
  getAttribute,
  getChargingPriceById,
  getCostType,
  getSosTypes,
  standardList,
  updateChargePrice
} from "@/api/Outpatient/chargingPrice.js";
import {pinyin} from "pinyin-pro";
import {getDosaUnt} from "@/api/systemCatalogue/traMedici";
import {withLoading} from "@/untils/loading";

export default {
  components: {},

  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '' || value === null || value === undefined) {
        callback(new Error('不能为空'));
      } else if (isNaN(Number(value))) {
        callback(new Error('必须为数字'));
      } else {
        callback();
      }
    };
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // str
      idx: '',
      standardItemName: '',
      financialClassIdControl: false,
      tableWidth: '', //右侧表格动态宽度
      windowWidth: '',
      watch: '查看',
      searchValue: '',
      toCodeNum: '0000',//拼接自增 导零
      iconHandleClick: 'el-icon-charging',
      CatalogueName: '项目价格',
      DropDownedName: '全部',
      typeValue: '',
      YNuseVaule: '可用',
      nowDateTimeValue: '',
      iconComes: 'el-icon-charging',
      operatingTime: '',
      // boolean
      disabled: true,
      noEidt: true,
      formdisabled: true,
      loading: false,
      dialogVisible: false,	//此乃查看/编辑控制
      addChargingVisible: false, //此乃新增控制
      // number
      dataIndex: 0,
      CodeNumber: 0,
      pageNum: 1, //当前页currentPage
      pageSize: 8,
      totalSize: 10, //总条数
      currentNode: null, //当前选择的节点
      pageDataState: null,
      isLookData: false,
      dynamicTitle: '',
      /* obj */
      // 新增
      addForm: {
        id: null,
        applicableObjects: null,
        chargeProjectName: "",
        chstype: null,
        costid: null,
        costmode: 0,
        costname: "",
        depexecutetype: 2,
        description: "",
        doctorAdviceName: "",
        executedepid: null,
        executemode: 1,
        expenseCategoryId: null,
        finClassCode: "",
        financialClassId: null,
        guidancecost: null,
        hospcost: null,
        isocode: "",
        isoname: "",
        measurementUnit: "",
        medicalRecordCostId: null,
        odcost: null,
        oneCeilingPrice: null,
        priceCode: "",
        remarks: "",
        selfproportion: null,
        simpCode: "",
        state: null,
        threeCeilingPrice: null,
        twoCeilingPrice: null,
        type: null
      },
      editForm: {
        id: null,
        applicableObjects: null,
        chargeProjectName: "",
        chstype: null,
        costid: null,
        costmode: null,
        costname: "",
        depexecutetype: null,
        description: "",
        doctorAdviceName: "",
        executedepid: null,
        executemode: null,
        expenseCategoryId: null,
        finClassCode: "",
        financialClassId: null,
        guidancecost: null,
        hospcost: null,
        isocode: "",
        isoname: "",
        measurementUnit: "",
        medicalRecordCostId: null,
        odcost: null,
        oneCeilingPrice: null,
        priceCode: "",
        remarks: "",
        selfproportion: null,
        simpCode: "",
        state: null,
        threeCeilingPrice: null,
        twoCeilingPrice: null,
        type: null
      },
      // arr
      data: [],
      oop: [],
      userInfo: [],
      // 新增表单自定义格式
      formType: [],
      formType2: [],
      formType3: [],
      watchData: [],
      //finClassCode:[],
      executedepid: [],
      chargeProjectName: [],
      doctorOptions: [],
      dosaUntOptions: [],
      depexecutetype: [{id: 0, label: '固定执行科室'}, {id: 1, label: '病人所在科室'}, {
        id: 2,
        label: '操作员所在科室'
      }],
      executemodeOptions: [{id: 0, label: '否'}, {id: 1, label: '是'}],
      /*executemode: [{ id: 0, label: '否' },{ id: 1, label: '是' }],*/
      costTypeOptions: [],
      measureUnitOptions: [{id: 1, label: '个'}, {id: 2, label: '瓶'}, {id: 3, label: '盒'}],
      state: [{id: 1, label: '可用'}, {id: 0, label: '禁用'}],
      costmode: [{id: 0, label: '标准单价'}, {id: 1, label: '手工定价'}, {id: 2, label: '处方划价'}],
      kszxfs: [{id: 0, label: '固定执行科室'}, {id: 1, label: '病人所在科室'}, {id: 2, label: '操作员所在科室'}],
      isExecute: [{id: 1, label: '是'}, {id: 0, label: '否'}],
      chstype: [{id: 1, label: '甲类'}, {id: 2, label: '乙类'}, {id: 3, label: '丙类'}, {id: 4, label: '特检特治'}],
      lhType: [{id: 1, label: '一类型'}, {id: 0, label: '二类型'}],
      // 0 全部 1 门诊 2 住院 3 门诊和住院 4 打包明细
      applicableObjects: [{id: 0, label: '全部'}, {id: 1, label: '门诊'}, {id: 2, label: '住院'}, {
        id: 3,
        label: '门诊和住院'
      }, {id: 4, label: '打包明细'}],

      rules: {
        // 标准收费项目字段
        chargeProjectName: [{required: true, message: '收费项目名称不能为空', trigger: 'blur'}],
        executemode: [{required: true, message: '执行方式不能为空', trigger: 'change'}],
        applicableObjects: [{required: true, message: '适用对象不能为空', trigger: 'change'}],
        expenseCategoryId: [{required: true, message: '费用类别不能为空', trigger: 'change'}],
        /*measurementUnit: [{required: true, message: '计量单位不能为空', trigger: 'blur'}],*/
        oneCeilingPrice: [{required: true, validator: validateNumber, trigger: 'blur'}],

        // 价格信息字段
        costname: [{required: true, message: '费用名称不能为空', trigger: 'blur'}],
        doctorAdviceName: [{required: true, message: '医嘱名称不能为空', trigger: 'blur'}],
        state: [{required: true, message: '状态不能为空', trigger: 'change'}],
        depexecutetype: [{required: true, message: '执行类型不能为空', trigger: 'change'}],
        executedepid: [
          {
            required: true,
            message: '执行科室不能为空',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.addForm.depexecutetype === 0 && !value) {
                callback(new Error('执行科室不能为空'));
              } else {
                callback();
              }
            }
          }
        ],
        guidancecost: [{required: true, validator: validateNumber, trigger: 'blur'}],
        odcost: [{required: true, validator: validateNumber, trigger: 'blur'}],
        costmode: [{required: true, message: '收费方式不能为空', trigger: 'change'}]
      },

      YNuse: [{id: 1, label: '可用', value: '1'}, {id: 2, label: '禁用', value: '2'}],
      // title右侧按钮
      headerBtn: [
        {search: "search", title: "搜索", type: "success"},
        {add: "add", title: "新增", type: "warning",auth:'system:costnametable:add'},
      ],
      // title右侧按钮
      tableRows: [
        {name: "系统序号", prop: "id", type: ""}, {name: "医嘱名称", prop: "doctorAdviceName", type: ""},
        //{name: "医保编码", prop: "isocode", type: ""}, {name: "医保名称", prop: "isoname", type: ""},
        {name: "收费方式", prop: "costmode", type: "", op: "costmode"},
        {name: "项目价格名称", prop: "costname", type: ""},
        /*{ name:"执行方式", prop:"executemode", op:"executemode"},*/
        //{name: "医保类别", prop: "chstype", type: "", op: "chstype"},
        {name: "指导单价", prop: "guidancecost", nz: "nz"}, {name: "门诊单价", prop: "odcost", type: ""},
        //{name: "自付比例", prop: "selfproportion", type: ""},
        {name: "收费项目序号", prop: "costid", nz: "nz"},
        {
          name: "执行科室",
          prop: "executedepid",
          type: "",
          op: "executedepid"
        }, {name: "操作时间", prop: "createTime", type: ""},
        {name: "操作人", prop: "createStaffName", nz: "nz"},
        {name: "修改时间", prop: "updateTime", type: ""},
        {name: "修改人", prop: "updateStaffName", type: ""},
        {name: "备注说明", prop: "remarks", type: ""},
      ],
      elTree: [
        {
          label: '全部',
          path: '',
          title: '',
          icon: 'el-icon-news',
          children: []
        }
      ],
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      permissionsArr:[],
    };


  },
  computed: {
    // 格式化数字，确保4个0后的数字自增时不会出现前导零
    formattedNumber() {
      return '00000' + this.toCodeNum.toString().slice(1);
    },
  },
  mounted() {
    // 新增表单自定义格式
    this.formType = AccType.map(function (v) {
      return v
    })
    this.formType2 = AccType2.map(function (v) {
      return v
    })
    this.formType3 = AccType.map(function (v) {
      return v
    })
    this.permissionsArr = JSON.parse(localStorage.getItem('permissions'))
    //获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
    this.$nextTick(() => {
      this.updateWindowWidth();
      window.addEventListener('resize', this.updateWindowWidth);
    })
    this.dataIndex++
    this.nowDateTime();
    this.loadData();
    this.getCostType();
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));

    // 模拟信息
    // this.oop = MedicenCata.map(function(v) {
    // 	return v
    // })
  },
  methods: {
    async handleRemoteSearch(v, i, query) {
      if (i === 0) { // 仅对特定下拉框（i=0）触发搜索
        const chargeProjectArry = await standardList({
          name: query, // 使用输入值作为搜索关键词
        });
        this.$data[v.op] = chargeProjectArry.data.map(v => ({label: v.chargeProjectName, id: v.id, ...v}));
      }
    },
    async getCostType() {
      const res = await getCostType();
      this.costTypeOptions = res.data.map(item => {
        return {
          id: item.id, label: item.name,
        }
      })
    },
    async getDosaUnt() {
      if (this.dosaUntOptions.length > 0) return;
      const res = await getDosaUnt();
      this.dosaUntOptions = res.data.map(item => {
        return {
          id: item.id, label: item.name,
        }
      })
    },

    safeGetMappedValue(col, row) {
      // 1. 检查数据有效性
      const rawValue = row[col.prop];
      if (rawValue === null || rawValue === undefined) return;

      // 2. 检查映射数组
      const mapArray = this[col.op];
      if (!col.op || !Array.isArray(mapArray)) return rawValue;

      // 3. 执行映射
      const matched = mapArray.find(item => item.id == rawValue);
      return matched?.label || rawValue;
    },
    /*
      about tree
    */
    async getAllTree() {
      let res = await getCostType();
      this.elTree[0].children.push(...res.data.map(v => {
        return {label: v.name, ...v}
      }));
    },
    handleNodeClick(data, e) {
      this.currentNode = data.id;
      this.loadData();
    },

    /*
      about table
    */

    // 数据源 毒麻类型
    async loadData() {
      let res = await costnametablePage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.searchValue === '' ? '' : this.searchValue,
        state: this.pageDataState ?? this.pageDataState,
        expenseCategoryId: this.currentNode ?? this.currentNode,
      })
      console.log(res.data,'executedepidexecutedepid');
      this.tableData = res.data.content.map(item => {
        return {
          ...item,
          expenseCategoryId: parseInt(item.expenseCategoryId),
          odcost :  Number(item.odcost).toFixed(2),
          guidancecost :  Number(item.guidancecost).toFixed(2),
          hospcost :  Number(item.hospcost).toFixed(2),
          executedepid :  item.executedepid === 0 ? '' : item.executedepid,
        }
      });
      this.totalSize = res.data.totalSize;
      this.pageSize = res.data.pageSize;
      const abteilungArry = await getAttribute();
      this.executedepid = abteilungArry.data.map(v => {
        return {id: v.id, label: v.deptName}
      })
    },
    // col 里面包含了表头字段和名称，list 是表格数据
    columnWidth(col, list) {
      let prop = col.prop, lab = col.lab;
      let width = 80; // 设定一个最小值
      let maxlenStr = ""; // 最长字符串
      for (let info of list) {
        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
      }
      width = Math.max(width, len(lab), len(maxlenStr));
      // 表格自带的内边距(20px) 自调
      return width + 22; // 这里加了 12px
      function len(str) {
        // 实际分配长度可根据需要自行调整
        let length = 8;
        for (const char of str + "") {
          // 英文小写字符 8px
          if ("a" <= char && char <= "z") length += 8;
          // 英文大写字符 8px
          else if ("A" <= char && char <= "Z") length += 8;
          // 中文字符 28px
          else if (char >= "\u4e00" && char <= "\u9fa5") length += 28;
          // 其他 8px
          else length += 12;
        }
        return length;
      }
    },
    // see table
    async handleStartOrDisabled(row) {
      const action = row.state === 1 ? '禁用' : '启用'
      this.$confirm(`请确认是否${action}当前选项`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await withLoading(this, `${action}处理中...`)(async () => {
          // 直接修改状态并提交
          this.editForm = JSON.parse(JSON.stringify(row))
          this.editForm.state = row.state === 0 ? 1 : 0;
          const res = await updateChargePrice(this.editForm);
          if (res.code === 200) {
            await this.loadData()
          } else {
            this.$message.error(res.message)
          }
        });
      }).catch(() => {
        this.editForm.state = row.state === 0 ? 1 : 0
        this.loadData()
        this.$message({type: "info", message: "已取消"});
      });
    },


    // edit table
    async handleShowData(val) {
      this.dynamicTitle = '查看';
      this.isLookData = true;
      let res = await standardList();
      let data = res.data.find(item => item.id === val.costid)
      this.editForm = JSON.parse(JSON.stringify(val));
      this.editForm.costid = data.id;
      this.editForm.type = data.type
      this.editForm.priceCode = data.priceCode
      this.editForm.description = data.description
      this.editForm.oneCeilingPrice = data.oneCeilingPrice
      this.editForm.twoCeilingPrice = data.twoCeilingPrice
      this.editForm.measurementUnit = data.measurementUnit
      this.editForm.chargeProjectName = data.chargeProjectName
      this.editForm.threeCeilingPrice = data.threeCeilingPrice
      this.editForm.applicableObjects = data.applicableObjects
      this.editForm.medicalRecordCostId = data.medicalRecordCostId
      data.finClassCode != null ? this.editForm.finClassCode = data.finClassCode : null
      data.financialClassId != null ? this.editForm.financialClassId = data.financialClassId : null
      this.editForm.simpCode = pinyin(data.chargeProjectName, {
        pattern: 'first',
        toneType: 'none',
        separator: ''
      }).toLocaleUpperCase();
      this.dialogVisible = true;
      this.watch = '编辑';
      this.noEidt = true;
      this.id = val.id
    },

    async handleClickEdit(val) {
      this.dynamicTitle = '编辑';
      this.isLookData = false;
      this.editForm = JSON.parse(JSON.stringify(val));
      let res = await standardList();
      let data = res.data.find(item => item.id === val.costid)
      console.log(data, 'measurementUnit')
      this.editForm = JSON.parse(JSON.stringify(val));
      this.editForm.costid = data.id;
      this.editForm.type = data.type
      this.editForm.priceCode = data.priceCode
      this.editForm.description = data.description
      this.editForm.oneCeilingPrice = data.oneCeilingPrice
      this.editForm.twoCeilingPrice = data.twoCeilingPrice
      this.editForm.chargeProjectName = data.chargeProjectName
      this.editForm.threeCeilingPrice = data.threeCeilingPrice
      this.editForm.applicableObjects = data.applicableObjects
      this.editForm.medicalRecordCostId = data.medicalRecordCostId
      data.finClassCode != null ? this.editForm.finClassCode = data.finClassCode : null
      data.financialClassId != null ? this.editForm.financialClassId = data.financialClassId : null
      this.editForm.simpCode = pinyin(data.chargeProjectName, {
        pattern: 'first',
        toneType: 'none',
        separator: ''
      }).toLocaleUpperCase();
      this.dialogVisible = true;
      this.watch = '编辑';
      this.noEidt = true;
      this.id = val.id
    },
    // 编辑保存
    async saveEditData() {
      await this.$refs.mainForm.validate();

      const chargingPrice = await getChargingPriceById(this.editForm.id);
      const currentType = chargingPrice.data.depexecutetype;
      const newType = this.editForm.depexecutetype;

      if ((newType === 1 || newType === 2) && currentType === 0) {
        this.editForm.executedepid = 0;
      }
      await withLoading(this, '修改处理中...')(async () => {
        let res = await updateChargePrice(this.editForm);

        if (res.code === 200) {
          this.editForm = Object.assign({}, this.$options.data.call(this).editForm);
          this.dialogVisible = false;
          await this.loadData();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //新增保存
    async addNewData() {
      try {
        await this.$refs.mainForm.validate();
      } catch {
        this.$message.warning("请填写完整表单");
        return;
      }
      console.log(this.addForm,'this.addFormthis.addFormthis.addForm')
      if (this.addForm.depexecutetype === 0 && this.addForm.executedepid === null) {
        this.$message.warning("请选择固定执行的科室!");
        return;
      }
      await withLoading(this, '数据提交中...')(async () => {
        const res = await addChargePrice(this.addForm);
        if (res.code === 200) {
          this.addForm = Object.assign({}, this.$options.data.call(this).addForm);
          this.addChargingVisible = false;
          await this.loadData();
          this.$message.success("操作成功");
        } else {
          this.$message.error(res.message);
        }
      });
    }
    ,
    async monitorAddData1(v, i) {
      switch (i) {
        case 0 :
          const chargeProjectArry = await standardList({name:this.addForm.chargeProjectName});
          this.chargeProjectName = chargeProjectArry.data.map(v => {
            return {label: v.chargeProjectName, id: v.id, ...v}
          })
          break;
      }
    }
    ,

    monitorAddDataManage1(v, i, event) {
      switch (i) {
        case 0:
          this.addForm = Object.assign({}, this.$options.data.call(this).addForm)
          const selectedProject = this.chargeProjectName.find(item => item.id === event);
          const newSelectedProject = JSON.parse(JSON.stringify(selectedProject))
          this.addForm.costid = newSelectedProject.id;
          this.addForm.chargeProjectName = newSelectedProject.chargeProjectName;
          this.addForm.simpCode = pinyin(this.addForm.chargeProjectName, {
            pattern: 'first',
            toneType: 'none',
            separator: ''
          }).toLocaleUpperCase();
          this.addForm.expenseCategoryId = parseInt(newSelectedProject.expenseCategoryId);
          this.addForm.applicableObjects = newSelectedProject.applicableObjects;
          this.addForm.oneCeilingPrice = newSelectedProject.oneCeilingPrice
          this.addForm.twoCeilingPrice = newSelectedProject.twoCeilingPrice
          this.addForm.threeCeilingPrice = newSelectedProject.threeCeilingPrice
          this.addForm.measurementUnit = newSelectedProject.measurementUnit
          this.addForm.description = newSelectedProject.description
          this.addForm.costname = newSelectedProject.chargeProjectName
          this.addForm.type = newSelectedProject.type
          this.addForm.state = 1;
          this.addForm.doctorAdviceName = newSelectedProject.chargeProjectName
          //this.addForm = {...selectedProject}
          this.addForm.guidancecost = newSelectedProject.threeCeilingPrice
          this.addForm.odcost = newSelectedProject.threeCeilingPrice
          this.addForm.priceCode = newSelectedProject.priceCode
          break;
      }
    }
    ,

    async monitorAddData2(v, i) {
      switch (i) {
        case 3:
          const standardArry = await getSosTypes();
          this.finClassCode = standardArry.data.map(v => {
            return {label: v.code, id: v.id, ...v}
          })
          break;
      }
    }
    ,
    // SelectVal to editForm
    async monitorAddDataManage2(v, i) {
      switch (i) {
        case 3:
          const options = this.$data[v.op];
          if (options.id === 1 || options.id === 2) {
            this.addForm.executedepid = null;
            return;
          }
          const selectedValue = this.$data.addForm[v.modelValue];
          const selectedItem = options.find(item => item.id === selectedValue);
          this.addForm.financialClassId = selectedItem.id;
          break
        case 6:
          const abteilungArry = await getAttribute();
          this.executedepid = abteilungArry.data.map(v => {
            return {label: v.deptName, id: v.id, ...v}
          })
          break;
      }
    },

    /*async monitorUpdateData1(v, i) {
      switch (i) {
        case 0 :
          const chargeProjectArry = await standardList({pageNum: 1, pageSize: 50});
          this.chargeProjectName = chargeProjectArry.data.map(v => {
            return {label: v.chargeProjectName, id: v.id, ...v}
          })
          break;
        case 2:
          break;
        case 3:
          break;
      }
    },*/
    // SelectVal to editForm
    monitorUpdateDataManage1(v) {
      switch (this.idx) {
        case 0:

          break;
        case 2:
          break;
        case 3:
          break;
      }
    }
    ,

    async monitorUpdateData2(v, i) {
      switch (i) {
        case 3:
          const standardArry = await getSosTypes();
          this.finClassCode = standardArry.data.map(v => {
            return {label: v.code, id: v.id, ...v}
          })
          break;
        case 7:
          const abteilungArry = await getAttribute();
          this.executedepid = abteilungArry.data.map(v => {
            return {label: v.deptName, id: v.id, ...v}
          })
          break;
      }
    }
    ,
    // SelectVal to editForm
    async monitorUpdateDataManage2(v, i) {
      switch (i) {
        case 3:
          const options = this.$data[v.op];
          const selectedValue = this.$data.editForm[v.modelValue];
          const selectedItem = options.find(item => item.id === selectedValue);
          this.editForm.financialClassId = selectedItem.id;
          break
        case 7:
          const abteilungArry = await getAttribute();
          this.executeAbteilung = abteilungArry.data.map(v => {
            return {label: v.deptName, id: v.id, ...v}
          })
          break;
      }
    }
    ,

    addEmptyForm() {
      this.addForm = Object.assign({}, this.$options.data.call(this).addForm)
      this.addChargingVisible = false
      this.$refs.mainForm.resetFields();
    }
    ,

    cancelUpdateForm() {
      this.loadData()
      this.editForm = Object.assign({}, this.$options.data.call(this).editForm)
      this.isLookData = false;
      this.dialogVisible = false
      this.$refs.mainForm.resetFields();
    }
    ,

    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.dialogVisible = false;
            this.formdisabled = false;
            this.addForm = Object.assign({}, this.$options.data.call(this).addForm);
            this.editForm = Object.assign({}, this.$options.data.call(this).editForm);
            this.loadData();
            done();
          })
          .catch(_ => {
          });
    }
    ,
    // db events
    async handledbRow(row, column, event) {
      if (row) {
        this.dynamicTitle = '查看';
        this.isLookData = true;
        this.editForm = {...row}
        let res = await standardList({name: row.costname, pageSize: null});
        let data = res.data[0]
        this.editForm = JSON.parse(JSON.stringify(row));
        this.editForm.chstype = row.chstype === '' ? null : parseInt(row.chstype)
        this.editForm.costid = data.id;
        this.editForm.type = data.type
        this.editForm.priceCode = data.priceCode
        this.editForm.description = data.description
        this.editForm.oneCeilingPrice = data.oneCeilingPrice
        this.editForm.twoCeilingPrice = data.twoCeilingPrice
        this.editForm.measurementUnit = data.measurementUnit
        this.editForm.chargeProjectName = data.chargeProjectName
        this.editForm.threeCeilingPrice = data.threeCeilingPrice
        this.editForm.applicableObjects = data.applicableObjects
        this.editForm.expenseCategoryId = data.expenseCategoryId
        this.editForm.medicalRecordCostId = data.medicalRecordCostId
        data.finClassCode != null ? this.editForm.finClassCode = data.finClassCode : null
        data.financialClassId != null ? this.editForm.financialClassId = data.financialClassId : null
        this.editForm.simpCode = pinyin(data.chargeProjectName, {
          pattern: 'first',
          toneType: 'none',
          separator: ''
        }).toLocaleUpperCase();

        this.dialogVisible = true
      } else {

      }
      this.formdisabled = true
    }
    ,

    // 步骤
    async handClick(i) {
      switch (i) {
        case 0:
          const res = await costnametablePage({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.searchValue === '' ? '' : this.searchValue,
            state: this.pageDataState == null ? null : this.pageDataState
          })
          if (res.code === 200) {
            this.tableData = res.data.content
            this.totalSize = res.data.totalSize;
            this.pageSize = res.data.pageSize;
          } else {
            this.$message.error(res.message)
          }
          break;
        case 1:
          // 处理索引2的逻辑 => 新增
          this.watch = '新增';
          this.addChargingVisible = true;
          this.addForm = Object.assign({}, this.$options.data.call(this).addForm)
          this.getDosaUnt();
          break;
      }
    }
    ,

    //状态数据
    async handleCommand(command) {
      this.pageDataState = command === 'a' ? 1 : command === 'b' ? 0 : command === 'c' ? null : null;
      this.DropDownedName = command === 'a' ? '可用' : command === 'b' ? '禁用' : '全部';
      let res = await costnametablePage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.searchValue == '' ? '' : this.searchValue,
        state: this.pageDataState === null ? null : this.pageDataState,
      })
      if (res.code === 200) {
        this.tableData = res.data.content
        this.totalSize = res.data.totalSize;
        this.pageSize = res.data.pageSize;
      } else {
        this.$message.error(res.message)
      }
    }
    ,

    async OpenIconsFocus(v, i, event) {
      switch (i) {
        case 0:
          const selectedProject = this.chargeProjectName.find(item => item.id === event);
          if (this.watch === ('编辑')) {
            this.editForm.simpCode =
                pinyin(selectedProject.chargeProjectName, {
                  pattern: 'first',
                  toneType: 'none',
                  separator: ''
                }).toLocaleUpperCase();
          }
          this.addForm.simpCode =
              pinyin(selectedProject.chargeProjectName, {
                pattern: 'first',
                toneType: 'none',
                separator: ''
              }).toLocaleUpperCase();
          break;
      }
    }
    ,

    shouldDisableField(field) {
      if (field.modelValue != 'executedepid') return
      if (this.watch === ('编辑')) {
        const isState = field.modelValue === 'executedepid' &&
            [1, 2].includes(this.editForm.depexecutetype);
        if (isState) {
          this.editForm.executedepid = null;
        }
        return isState;
      }

      const isState = field.modelValue === 'executedepid' &&
          [1, 2].includes(this.addForm.depexecutetype);
      if (isState) {
        this.addForm.executedepid = null;
      }
      return isState;
    }
    ,


    //分页
    //每页条数改变触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.loadData();
    }
    ,
    //当前条数改变触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loadData();
    }
    ,
    // 实时宽度
    updateWindowWidth() {
      this.windowWidth = window.innerWidth - 328;
    }
    ,
    // 系统当前日期时间
    nowDateTime() {
      const now = new Date(); //创建时间日期对象
      const year = now.getFullYear(); //年
      const month = now.getMonth() + 1; //月份是从0开始的
      const day = now.getDate(); //日
      const hours = now.getHours(); //小时
      const minutes = now.getMinutes(); //分钟
      const seconds = now.getSeconds(); //秒
      const currentDate = `${year}-${month}-${day}`.replace(/-/g, '') //替换操作
      this.nowDateTimeValue = `${year}-${month}-${day}` + ` ` + `${hours}:${minutes}:${seconds}`
    }
    ,
    getColumnWidth(label, prop, tableData) {
      const minWidth = 80;
      const padding = 30; // 增加边距缓冲
      const contentList = tableData.map(item => item?.[prop] ?? '');

      // 计算所有内容宽度（包括表头）
      const widths = [...contentList, label].map(text => {
        const str = String(text || '');
        return this.getTextWidth(str) + padding;
      });

      return Math.max(minWidth, ...widths);
    }
    ,

    // 精确计算文本宽度（使用Canvas）
    getTextWidth(text, fontSize = 14) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = `${fontSize}px Microsoft YaHei`;
      return ctx.measureText(text).width;
    }
    ,

    labelHead(h, {column, $index}) {
      let l = column.label.length;
      let f = 12;
      column.minWidth = f * (l + 5); //加上一个文字长度
      return h("div", {class: "table-head", style: {width: "100%"}}, [
        column.label,
      ]);
    }
    ,
  }
}
</script>

<style lang="less" scoped>
.patient-dialog {
  .el-dialog {
    /* 改为动态高度控制 */
    max-height: 70vh !important;
    height: auto !important; /* 关键修改 */
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 15% !important; /* 上移对话框位置 */
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;

    .el-dialog__header {
      height: 35px !important;
      padding: 5px 15px !important;
      flex-shrink: 0; /* 防止头部被压缩 */

      .el-dialog__title {
        font-size: 12px !important;
        line-height: 25px !important;
      }
    }

    .el-dialog__body {
      flex: 1;
      padding: 8px !important;
      overflow: hidden; /* 外层隐藏滚动 */
      display: flex;
      flex-direction: column;
      min-height: 0; /* 关键修复：允许flex子项收缩 */

      .aform, .bform {
        flex: 1;
        overflow-y: auto; /* 只在表单容器内滚动 */
        margin-bottom: 5px;
        min-height: 0; /* 关键修复 */

        .el-tabs {
          height: 100%;
          display: flex;
          flex-direction: column;
          min-height: 0; /* 关键修复 */

          .el-tabs__content {
            flex: 1;
            overflow: visible; /* 禁用嵌套滚动 */
            padding: 5px;
          }
        }
      }
    }

    .el-dialog__footer {
      height: 40px !important;
      padding: 5px !important;
      flex-shrink: 0; /* 防止底部被压缩 */

      .el-button {
        padding: 7px 15px !important;
      }
    }
  }

  /* 小屏幕适配 */
  @media (max-height: 600px) {
    .el-dialog {
      max-height: 80vh !important;
      top: 10% !important;

      .el-dialog__body {
        padding: 5px !important;
      }
    }
  }
}

/* 极紧凑表单样式 */
/deep/ .el-form-item {
  margin-bottom: 8px !important;

  .el-form-item__label {
    padding-bottom: 0 !important;
    line-height: 20px !important;
    height: 20px !important;
  }

  .el-form-item__content {
    line-height: 20px !important;
  }
}

/deep/ .el-tabs__item {
  padding: 0 10px !important;
  height: 30px !important;
  line-height: 30px !important;
}

// 穿透
/deep/ .el-dialog__header {
  padding: 12px;
  background-color: #007bb0;
}

/deep/ .el-dialog__title {
  font-size: 12px;
  color: #fff;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #87898f;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #87898f;
}

/deep/ .el-icon-arrow-left:before {
  content: "\e67d";
  font-size: 18px;
}

/deep/ .el-dropdown-menu__item {
  font-size: 12px;
}

/deep/ .el-dialog__body {
  padding: 12px;
}

/deep/ .el-descriptions {
  font-size: 12px !important;
}

/deep/ .el-descriptions-item__container {
  display: flex !important;
  // align-items: center !important;
  padding-top: 12px !important;
}

/deep/ .el-descriptions-item__label:not(.is-bordered-label) {
  padding-left: 0;
  display: flex;
  justify-content: right;
}

/deep/ .el-color-picker__icon, .el-input, .el-textarea {
  width: 100%;
}

/deep/ .el-pagination {
  padding: 6px;
}

// content
.MedicenCata {
  height: 100%;
  width: 100%;
  // header
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    background-color: #efefef;
    padding: 4px;

    // justify-content: space-evenly;
    // icon
    .header-icon {
      display: flex;
      align-items: center;
    }

  }

  // main
  .main {
    width: 100%;
    margin-left: 8px;
    display: flex;
    justify-content: left;
    overflow-y: auto; /* 当内容超出容器高度时显示垂直滚动条 */
    // left
    .main-left {
      .custom-tree {
        max-height: 100%; /* 设置树形菜单的最大高度为父容器的100% */
        overflow-y: auto; /* 当内容超出设定高度时显示滚动条 */
      }

      /deep/ .el-tree-node__content {
        height: 40px;
        padding-left: 0 !important;
      }

      /deep/ .el-tree-node__label {
        font-size: 12px;
      }

      width: 10%;
      height: 100%;
    }

    // right
    .main-right {
      flex: 1;
      width: 100%;
      height: 100%;
      // alert
      .addmessagesBox {
        .tabs {
          /deep/ .el-select > .el-input {
            width: 172px;
          }

          /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 172px;
          }

          /deep/ .el-form-item__content {
            display: flex;

            span {
              font-size: 12px;
            }
          }

          .oneLine {
            width: 524px;
            // background-color: indianred;
          }
        }

        /deep/ .el-dialog__title {
          font-size: 12px;
        }

        /deep/ .el-table {
          font-size: 12px;
        }

      }

      // icon
      .main-icon {
        display: flex;
        align-items: center;
        padding: 12px;
        line-height: 40px;

        .main-icon-a {
          // width: 240px;
          // background-color: #00557f;
        }

        .main-icon-b {
          margin-left: 20px;

          /deep/ .el-dropdown {
            font-size: 12px;
            cursor: pointer;
          }

          /deep/ .el-dropdown:hover {
            font-weight: bold;
            color: #66b1ff;
          }

          /deep/ .el-icon--right {
            // background-color: #66b1ff;
          }

          /deep/ .el-popper[x-placement^=bottom] {
            margin-top: 0;
          }
        }

        // c
        .main-icon-c {
          display: flex;
          margin-left: 28px;

          /deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b] {
            width: 80%;
          }
        }
      }

      // table
      /deep/ .el-table .cell {
        font-size: 12px;
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div :first-child {
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div {
        text-align: center;
        overflow: hidden;
        white-space: normal;
        word-break: break-all;
      }

      .table {

      }
    }
  }

  // feet
  .feet {
    .addmessagesBox {
      .aform {
        padding: 12px;
        margin-top: 12px;
        border: 1px solid #e7e7e7;
      }

      .bform {
        padding: 12px;
        margin-top: 12px;
        border: 1px solid #e7e7e7;
      }
    }

    // alert
    .messagesBox {
      .tabs {

        /deep/ .el-form-item__content {
          display: flex;

          span {
            font-size: 12px;
          }
        }

        .oneLine {
          width: 524px;
          // background-color: indianred;
        }
      }

      /deep/ .el-dialog__title {
        font-size: 12px;
      }

      /deep/ .el-table {
        font-size: 12px;
      }

    }
  }

}
</style>